<!-- 管理员注册页面 -->
<template>
  <el-container>
    <el-header class="header">
      <h1>学生公寓分配管理系统——管理员注册</h1>
    </el-header>
    <el-main class="login">
      <el-form :label-position="labelPosition" label-width="80px  " :model="admin">
        <el-form-item label="用户名">
          <el-input v-model="admin.username" type="text" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="admin.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="admin.cellphone" type="number" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 60px;">
          <el-button type="primary" style="width:42%; margin:10px;" @click="register">
            注册
          </el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import {ElMessage} from 'element-plus'
import axios from 'axios'

export default {
  data() {
    return {
      labelPosition: 'right',
      admin: {
        username: '',
        password: '',
        cellphone: '',
      },
    }
  },
  methods: {

    /*
      注册操作
     */
    register() {
      // 判断注册信息是否为空
      if (!this.admin.username || !this.admin.password || !this.admin.cellphone) {
        // 弹出提示窗口
        ElMessage({
          showClose: true,
          message: '注册信息不能为空！',
          type: 'error',
        })
        return;
      }

      // 封装请求参数
      let postData = new URLSearchParams();
      postData.append("username", this.admin.username);
      postData.append("password", this.admin.password);
      postData.append("cellphone", this.admin.cellphone);

      let that = this.$router;
      // 通过aioxs发送请求
      axios.post("/admin/register", postData)
          .then(function (res) {
            switch (res.data.status) {
              case 10000:
                // 弹出提示窗口
                ElMessage({
                  showClose: true,
                  message: '注册成功！',
                  type: 'success',
                })
                that.push("/admin/login");
                break;
              case 10003:
                // 弹出提示窗口
                ElMessage({
                  showClose: true,
                  message: '用户名已存在！',
                  type: 'error',
                })
                break;
              case 10004:
                // 弹出提示窗口
                ElMessage({
                  showClose: true,
                  message: '手机号码已注册！',
                  type: 'error',
                })
                break;
            }
          })

    }
  },

  mounted() {
    // 删除后端session
    axios.get("/admin/logout")
        .then(function(res) {
          console.log(res)
        })
  }
}
</script>

<style scoped>
.el-header {
  text-align: center;
  margin-top: 60px;
}

.login {
  width: 400px;
  margin: 80px auto;
}
</style>